<template>
	<view>
		<image :src="topBg" mode="aspectFill" class="header-image"></image>
		<view class="content" v-if="active">
			<view class="share_box">
				<view class="step">
					<u-row justify="space-between">
						<u-col :span="12/prize.length" v-for="(item,index) in prize" :key="index">
							<view class="image_box">
								<image :src="item.icon" mode="aspectFit" @click="detail(item)"></image>
								<view class="text-ellipsis1">{{item.title}}</view>
							</view>
						</u-col>
					</u-row>
					<view class="line" style="position: relative;">
						<block v-for="(item,index) in prize" :key="index" >
							<view style="position: absolute;top: 0;left: 0;background-color: #ff8d5b;bottom: 0;z-index: 1;border-radius: 100px;" v-if="total_help >= item.target" :style="{width:changeWidth(item,index) + '%'}"></view>
						</block>
						<view  style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 2;">
							<u-row justify="space-between">
								<u-col :span="12/prize.length" v-for="(item,index) in prize" :key="index"
									style="justify-content: center !important;">
									<view style="display: flex;justify-content: center;">
										<view class="step_num" :class="{active_step : total_help >= item.target}"></view>
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<u-row justify="space-between">
						<u-col :span="12/prize.length" v-for="(item,index) in prize" :key="index">
							<view class="step_p_num">{{item.target}}人助力</view>
						</u-col>
					</u-row>
				</view>
				<view class="share_button_box">
					<view class="button_tips" v-if="total_help == 0">还没有人帮他助力</view>
					<view class="button_tips" v-else>已有{{total_help}}人帮他助力</view>
					<view class="dian" @click="toHelp" v-if="is_help == 0">助TA一臂之力</view>
					<view class="dian" v-else
						style="background: #CECECE;box-shadow: 0px 2px 4px 1px rgba(153, 153, 153,0.8)">已助力</view>
					<view class="fen" @click="toShare">我也要免费领取</view>
				</view>
				<view style="padding: 40rpx 40rpx 0 40rpx;">
					<u-avatar-group :urls="header_img" size="35" gap="0.4"></u-avatar-group>
				</view>
			</view>
			<view class="prize">
				<view class="title_image_box">
					<image src="../../static/index/minfei.png" style="width: 200rpx;" mode="" class="title_image">
					</image>
				</view>
				<view class="prize_box">
					<view class="prize_item" v-for="(item,index) in prize" :key="index"  @click="detail(item)">
						<view class="prize_image_box" >
							<image :src="item.thumb" mode="aspectFill" class="prize_image_image"></image>
						</view>
						<view class="prize_title text-ellipsis2">{{item.title}}</view>
					</view>
				</view>
			</view>
			<view class="illustrate">
				<view class="title_image_box">
					<image src="../../static/index/shuoming.png" mode="" class="title_image"></image>
				</view>
				<view class="illustrate_box">
					<view class="illustrate_title">活动说明：</view>
					<view class="illustrate_title_tips">注意:参加活动前请先阅读以下规则，以及点开奖品具体规则查看细则!</view>
					<view style="padding-top: 24rpx;">
						<u-parse :content="content"></u-parse>
					</view>
				</view>
			</view>
			<view class="recommend">
				<view class="title_image_box">
					<image src="../../static/index/tuijian.png" mode="" class="title_image"></image>
				</view>
				<view class="recommend_box">
					<scroll-view scroll-x="true">
						<view style="display: flex;">
							<view class="item_box" v-for="(item,index) in apartment" :key="index"
								@click="toDetail(item)">
								<image :src="item.thumb" mode=""></image>
								<view class="label_box">
									<view v-for="(i,idx) in item.labels" :key="idx" :style="{background: i.color}">{{i.title}}</view>
								</view>
								<view class="detail">
									<view class="left text-ellipsis1">{{item.title}}</view>
									<view class="right">{{item.price}}/周</view>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="guwen_button">
						<view>专业顾问帮我抢房</view>
						<button open-type="contact"></button>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<u-popup :show="show" mode="center" :safeAreaInsetBottom="false" bgColor="transparent"
			:closeOnClickOverlay="true" @close="show= false">
			<view class="pop" @click="show = false">
				<view class="pop_header_image">
					<image src="../../static/index/jiangpingshuoming.png" mode="" class="image1"></image>
					<image src="../../static/index/guang.png" mode="" class="image2"></image>
				</view>
				<view class="pop_content">
					<view class="pop_title">{{popTitle}}</view>
					<view class="pop_tips_item" v-for="(item,index) in intro" :key="index">{{item}}</view>
					<!-- <view class="pop_button">
						<view>立即分享</view>
						<button open-type="share"></button>
					</view> -->
				</view>
			</view>
		</u-popup>
		<!-- 活动结束 -->
		<u-modal :show="showModal" title=" " :content='modalContent' confirmColor="#F9B937"
			@confirm="modalConfirm"></u-modal>
		<LoginPop></LoginPop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showModal: false,
				modalContent: '',
				topBg: '', //顶部背景图
				content: '', //说明,
				prize: [], //奖品列表
				total_help: 0, //总助力人数
				intro: [], //奖品说明
				popTitle: '',
				apartment: [], //推荐公寓列表
				is_help: 0, //是助力
				uid: null,
				active: true,
				header_img:[]
			}
		},
		onLoad(options) {
			this.uid = options.uid
			console.log('分享参数', options)
			this.getData()
		},
		methods: {
			//奖品详情
			detail(item) {
				this.intro = item.intro
				this.popTitle = item.title
				this.show = true
			},
			changeWidth(item,index,){
				console.log(item.target,index,this.prize.length)
				let length = 100 / this.prize.length
				console.log('每段长度',length)
				if(index == 0){
					return length/2
				}else if(index+1 == this.prize.length ){
					return 100
				}else{
					return length/2 + length*index
				}
			},
			modalConfirm() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			toHelp() {
				if (uni.getStorageSync('userInfo').token) {
					console.log('助力')
					uni.showLoading({
						title: '加载中'
					});

					uni.request({
						url: `https://app.ukmioliving.com/api/help/to_help?uid=${this.uid}`, //仅为示例，并非真实接口地址。
						method: 'GET',
						header: {
							'Content-Type': 'application/json;charset=UTF-8',
							token: uni.getStorageSync('userInfo').token
						},
						success: (res) => {
							console.log(res)
							if (res.data.code == 1) {
								uni.hideLoading();
								this.is_help = 1
								this.total_help = Number(this.total_help) + 1
								uni.showToast({
									title: '助力成功',
									duration: 2000,
									icon: 'success'
								});
							} else {
								uni.hideLoading();
								uni.showToast({
									title: res.data.msg,
									duration: 2000,
									icon: 'none'
								});
							}
						},
						fail: err => {
							uni.hideLoading();
						}
					});
					// this.$H.get(`/help/to_help?uid=${this.uid}`, {}, {
					// 	token: false
					// }).then(res => {

					// 	if (res.code == 1) {
					// 		uni.hideLoading();
					// 		this.is_help = 1
					// 		this.total_help = Number(this.total_help) + 1
					// 		uni.showToast({
					// 			title: '助力成功',
					// 			duration: 2000,
					// 			icon: 'success'
					// 		});
					// 	} else {
					// 		uni.hideLoading();
					// 		uni.showToast({
					// 			title: res.msg,
					// 			duration: 2000,
					// 			icon: 'none'
					// 		});
					// 	}


					// })

				} else {
					this.$store.commit('openPop')
				}
			},
			toDetail(item) {
				if (uni.getStorageSync('userInfo').token) {
					uni.navigateTo({
						url: `/pages/apartmentDetail/apartmentDetail?id=${item.id}`
					})
				} else {
					this.$store.commit('openPop')
				}
				// this.jump({url:`/pages/apartmentDetail/apartmentDetail?id=${item.id}`})
			},
			getData() {
				this.$H.get(`/help/get_help_data?uid=${this.uid}`, {}, {
					token: true
				}).then(res => {
					if (!res.data) {
						this.active = false
						this.modalContent = res.msg
						this.showModal = true
						console.log('请求数据', res)
					} else {
						this.is_help = res.data.is_help
						this.prize = res.data.prize
						this.topBg = res.data.help_top_thumb
						this.apartment = res.data.apartment
						this.total_help = res.data.total_help
						this.header_img = res.data.help_user
						this.content = res.data.help_intro.replace(/\\/g, "").replace(/style/g,
							"style=\"white-space: wrap;font-size: 14px;color: #999999;\"")
					}

				})
			},
			toShare() {
				if (uni.getStorageSync('userInfo').token) {
					uni.redirectTo({
						url: '/pages/index/share'
					})
				} else {
					this.$store.commit('openPop')
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #EBF1FD;
	}

	.u-modal__content.data-v-3626fcec {
		text-align: center;
	}

	.header-image {
		width: 100%;
		height: 636rpx;
	}

	.content {
		position: absolute;
		top: 536rpx;
		left: 24rpx;
		right: 24rpx;
		padding-bottom: 80rpx;
	}

	.share_box {
		position: relative;
		// height: 700rpx;
		padding-bottom: 40rpx;
		background: #FFFFFF;
		border-radius: 20px 20px 20px 20px;
		border: 2px solid #B4CDF9;

		.step_title {
			text-align: center;
			padding: 20rpx 0 10rpx 0;

			image {
				width: 172rpx;
				height: 42rpx;
			}
		}

	}

	.step {
		padding: 30rpx 24rpx 0 24rpx;

		.image_box {
			text-align: center;

			image {
				width: 100%;
				height: 110rpx;
			}

			view {
				font-size: 10px;
				font-weight: normal;
				color: #FFAD41;
			}
		}

		.line {
			margin: 24rpx 0;
			background: #DADADA;
			border-radius: 50px;
			height: 18rpx;

			.step_num {
				display: flex;
				justify-content: center;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				border: 4rpx solid #FFFFFF;
				// border: 4rpx solid red;
			}

			.active_step {
				background: #FF8D5B;
				border: 4rpx solid #FCDDD0;
			}
		}

		.step_p_num {
			text-align: center;
			font-size: 18rpx;
			font-weight: normal;
			color: #999999;
		}

	}

	.share_button_box {
		padding: 40rpx 72rpx 0 72rpx;
		// position: absolute;
		// bottom: 40rpx;
		// left: 72rpx;
		// right: 72rpx;

		.dian {
			text-align: center;
			padding: 20rpx;
			background: linear-gradient(180deg, #FD575C 0%, #F13E42 100%);
			box-shadow: 0px 2px 4px 1px rgba(251, 27, 27, 0.5);
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 30px;
		}

		.fen {
			margin-top: 32rpx;
			text-align: center;
			padding: 20rpx;
			background: #FDDB3B;
			box-shadow: 0px 2px 4px 1px #F9B937;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 30px;
		}

		.button_tips {
			padding-bottom: 20rpx;
			text-align: center;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.title_image_box {
		text-align: center;
		padding: 40rpx 0 32rpx 0;

		.title_image {
			width: 162rpx;
			height: 42rpx;
		}
	}

	.prize {
		.prize_box {
			padding: 40rpx 32rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 20px 20px 20px 20px;
			opacity: 1;
			border: 2px solid #B4CDF9;

			.prize_item {
				margin-bottom: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 48%;
				background: #F5F5F5;
				border-radius: 8px 8px 8px 8px;

				.prize_image_box {
					position: relative;
					width: 100%;

					.prize_image_image {
						width: 100%;
						height: 276rpx;
						border-radius: 8px 8px 0 0;
					}
				}

				.prize_title {
					margin: 10rpx 30rpx;
					text-align: center;
					width: 80%;
					font-size: 28rpx;
					font-weight: normal;
					color: #333333;
				}

			}
		}
	}

	.illustrate_box {
		padding: 40rpx 32rpx;
		background: #FFFFFF;
		border-radius: 20px 20px 20px 20px;
		border: 2px solid #B4CDF9;

		.illustrate_title {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}

		.illustrate_title_tips {
			padding-top: 28rpx;
			font-size: 28rpx;
			ont-weight: 500;
			color: #333333;
		}
	}

	.recommend {

		.recommend_box {
			padding: 48rpx 32rpx;
			background: #FFFFFF;
			border-radius: 20px 20px 20px 20px;
			border: 2px solid #B4CDF9;

			.item_box {
				margin-right: 16rpx;
				width: 594rpx;
				background: #F7F7F7;
				border-radius: 12px 12px 12px 12px;

				image {
					width: 594rpx;
					height: 386rpx;
					border-radius: 12px 12px 0 0;
				}

				.label_box {
					padding: 24rpx 24rpx 12rpx 24rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					view {
						margin-right: 16rpx;
						margin-bottom: 12rpx;
						padding: 8rpx 20rpx;
						line-height: 20rpx;
						font-size: 20rpx;
						font-weight: 400;
						// color: #F23F43;
						color: #fff;
						background: rgba(253, 145, 127, 0.3);
						border-radius: 30px;
						// border: 1px solid #F14046;
					}
				}

				.detail {
					padding: 0 24rpx 32rpx 24rpx;
					display: flex;
					align-content: center;
					justify-content: space-between;

					.left {
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}

					.right {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
					}
				}
			}

			.guwen_button {
				position: relative;
				margin-top: 48rpx;
				display: flex;
				justify-content: center;

				view {
					padding: 10rpx 60rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(180deg, #FD575C 0%, #F13E42 100%);
					box-shadow: 0px 2px 4px 1px rgba(251, 76, 27, 0.5);
					border-radius: 30px;
				}

				button {
					position: absolute;
					left: 120rpx;
					right: 120rpx;
					top: 0;
					bottom: 0;
					opacity: 0;
				}
			}
		}
	}
	.pop {
		// position: relative;
		// margin-right: -56rpx;
		width: 620rpx;
	
		.pop_header_image {
			position: relative;
			height: 184rpx;
	
			.image1 {
				position: absolute;
				left: -13rpx;
				bottom: -20rpx;
				width: 645rpx;
				height: 184rpx;
			}
	
			.image2 {
				position: absolute;
				right: -56rpx;
				top: -234rpx;
				width: 480rpx;
				height: 594rpx;
			}
		}
	
		.pop_content {
			padding: 48rpx 48rpx 40rpx 48rpx;
			border-radius: 0 0 40rpx 40rpx;
			background-color: #FFFFFF;
	
			.pop_title {
				padding-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
			}
	
			.pop_tips_item {
				padding-bottom: 10rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	
		// .pop_content {
		// 	position: absolute;
		// 	top: 298rpx;
		// 	left: 40rpx;
		// 	right: 92rpx;
	
		// 	.pop_content_title {
		// 		font-size: 56rpx;
		// 		line-height: 56rpx;
		// 		font-weight: 500;
		// 		color: #FFFFFF;
		// 	}
	
		// 	.pop_goods_name {
		// 		padding-top: 112rpx;
		// 		font-size: 36rpx;
		// 		line-height: 36rpx;
		// 		font-weight: 500;
		// 		color: #333333;
		// 	}
		// }
	
		.pop_button {
			position: relative;
			margin-top: 40rpx;
	
			view {
				text-align: center;
				padding: 24rpx;
				background: linear-gradient(90deg, #FF9E40 0%, #FE6522 100%);
				box-shadow: 0px 2px 4px 1px rgba(254, 101, 34, 0.4);
				border-radius: 30px;
				line-height: 32rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
	
			button {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: transparent;
			}
	
			button::after {
				border: none;
			}
		}
	}
</style>